<template>
  <div class="web-header w-global-color-bg">
    <el-menu
      :default-active="pageindex"
      class="w-content-box"
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b"
      @select="handleSelect">
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="resume">个人介绍</el-menu-item>
      <el-menu-item index="conclusion">学习</el-menu-item>
      <el-menu-item index="works">作品</el-menu-item>
      <el-menu-item index="package">封装</el-menu-item>
      <el-menu-item index="opinion">意见/建议</el-menu-item>
      <el-menu-item index="tool">工具</el-menu-item>
      <el-menu-item
        index="admin"
        class="admin w-flex-center">
        <user-logo
          width="30"
          height="30"
          fill="#fff"/>
        <span
          v-if="user.isGetUser"
          class="name">{{ user.name }}</span>
      </el-menu-item>
      <el-menu-item
        index="api"
        class="api w-flex-center">
        <span class="name">API</span>
      </el-menu-item>
      <el-menu-item
        index="clock"
        class="api w-flex-center">
        <el-popover
          placement="top-start"
          width="670"
          trigger="hover">
          <icon-clock
            slot="reference"
            width="30"
            height="30"
            fill="#ccc"/>
          <w-clock
            :w="670"
            :h="120"/>
        </el-popover>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import UserLogo from '@/icons/user.svg'
import { mapGetters } from 'vuex'
import IconClock from '@/icons/clock.svg'
import WClock from '@/components/global/clock/index'
export default {
  name: 'WebHeader',
  components: {
    UserLogo,
    IconClock,
    WClock
  },
  data() {
    return {
      // 当前分页
      pageindex: '1'
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  watch: {
    $route(to) {
      this.changePageIndex(to)
    }
  },
  mounted() {
    // 改变路由
    this.changePageIndex(this.$route)
  },
  methods: {
    // 导航栏选择点击
    handleSelect(e) {
      switch (e) {
        case 'home':
          this.$router.push({ name: 'WebHome' })
          break
        case 'resume':
          this.$router.push({ name: 'WebResume' })
          break
        case 'conclusion':
          this.$router.push({ name: 'WebConclusion' })
          break
        case 'works':
          this.$router.push({ name: 'WebWorks' })
          break
        case 'package':
          this.$router.push({ name: 'WebPackage' })
          break
        case 'opinion':
          this.$router.push({ name: 'WebOpinion' })
          break
        case 'tool':
          this.$router.push({ name: 'WebTool' })
          break
        case 'admin':
          this.$router.push({ name: 'Admin' })
          break
        case 'api':
          window.open('/webserver-api/docs/api')
          break
        default:
          break
      }
    },
    // 改变路由
    changePageIndex(router) {
      this.pageindex = router.meta.index
    }
  }
}
</script>

<style lang="scss" scoped>
.web-header {
  .w-content-box {
    border-bottom: none;
    .admin {
      float: right;
      font-size: 30px;
      .name {
        font-size: 20px;
      }
    }
    .api {
      float: right;
      font-size: 20px;
    }
  }
}
</style>
